<template>
  <div class="user-info">
    <el-row :span="24">

      <el-col :span="16">
        <basic-container>
          <el-tabs v-model="activeName">
            <el-tab-pane label="个人信息"
                         :name="0">
              <el-form label-width="110px" ref="form" :model="form" :rules="rules1">
                <!--                <el-form-item label="头像">-->
                <!--                  <el-upload class="avatar-uploader"-->
                <!--                             :show-file-list="false">-->
                <!--                    <img v-if="form.img"-->
                <!--                         :src="form.img"-->
                <!--                         class="avatar">-->
                <!--                    <i v-else-->
                <!--                       class="el-icon-plus avatar-uploader-icon"></i>-->
                <!--                  </el-upload>-->
                <!--                </el-form-item>-->
                <el-form-item label="姓名" prop="name">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="用户名" prop="username">
                  <el-input v-model="form.username" readonly></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                  <el-input v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="updateInfo">确认</el-button>
                  <el-button>取消</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="修改密码"
                         :name="1">
              <el-form label-width="110px" ref="form2"  :model="form2" :rules="rules2">
                <el-form-item label="原密码"
                              prop="oldpassword">
                  <el-input type="password"
                            v-model="form2.oldpassword"
                            autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="新密码"
                              prop="newpassword">
                  <el-input type="password"
                            v-model="form2.newpassword"
                            autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码"
                              prop="newpasswords">
                  <el-input type="password"
                            v-model="form2.newpasswords"
                            autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="updatePassword">确认</el-button>
                  <el-button>重置</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </basic-container>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import {mapGetters} from "vuex";
import {encryption} from 'utils/util'
import baseService from "../../crud/baseService";

export default {
  data() {
    return {
      activeName: 0,

      form: {
        img: 'https://avatar.gitee.com/uploads/61/632261_smallweigit.jpg!avatar100?1518660401',
        username: "",
        name: "",
        phone: "",

      },
      form2:{
        oldpassword: '',
        newpassword: '',
        newpasswords: ''
      },
      rules1: {
        name: [{required: true, message: '姓名不能为空', trigger: "blur"}],
        phone: [{required: true, message: '手机号不能为空', trigger: "blur"}]
      },
      rules2: {
        oldpassword: [
          {required: true, message: '密码不能为空', trigger: "blur"},
          {required: true, pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,20}$/, message: '密码格式不正确', trigger: "blur"},],
        newpassword: [{required: true, message: '新密码不能为空', trigger: "blur"}],
        newpasswords: [{required: true, message: '确认密码不能为空', trigger: "blur"}],
      }
    };
  },
  computed: {
    ...mapGetters(["menu", "tagList", "tagWel", "tag", "userInfo", "isMacOs"]),
  },
  created() {
    this.form.username = this.userInfo.username;
    this.form.phone = this.userInfo.phone;
    this.form.name = this.userInfo.name;
  },
  methods: {
    handleSubmit() {
      this.$message({
        message: this.form,
        type: "success"
      });
    },
    handleChange(item) {
      this.type = item.prop;
    },
    updateInfo() {
      this.$refs["form"].validate(valid => {
        if (!valid) {
          return;
        }
        // 修改个人信息
        let param = {

          name: this.form.name,
          phone: this.form.phone
        }
        baseService.postJsonData("/system/sysUser/updateUserInfo", param).then(res => {
          this.$message({
            message: "修改成功",
            type: "success"
          });
        });
      });

    },

    updatePassword() {


      this.$refs["form2"].validate(valid => {
        console.log(valid)
        if (!valid) {
          return;
        }

        let param = {
          oldpassword: this.form2.oldpassword,
          newpassword: this.form2.newpassword,
          newpasswords: this.form2.newpasswords
        }
        const user = encryption({
          data: param,
          type: 'SM4',
          key: '0123456789abcdeffedcba9876543210',
          param: ['oldpassword', 'newpassword', 'newpasswords']
        });

        baseService.postJsonData("/system/sysUser/updatePassword", user).then(res => {
          this.$message({
            message: "修改成功",
            type: "success"
          });
        });
      });
    }

  }
};
</script>

<style lang="scss">
.user-info {
  .avue-tabs {
    padding: 0 10px;
  }

  .el-tabs__content {
    padding: 20px 0;
  }

  &__img {
    display: block;
    margin: 0 auto;
    border-radius: 100%;
    width: 100px;
    height: 100px;
  }

  &__name {
    text-align: center;
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    margin-bottom: 0;
    margin-top: 10px;
  }

  &__setting {
    margin-bottom: 12px;
    display: block;
    font-size: 12px;
    color: #409eff;
    text-align: center;
  }

  &__desc {
    text-align: center;
    width: 200px;
    margin: 0 auto;
  }

  &__detail-desc {
    margin-top: 50px;
    font-size: 14px;

    p {
      margin-bottom: 10px;
    }

    span {
      margin-left: 10px;
    }
  }

  &__divider {
    border-top: 1px dashed #e8e8e8;
    display: block;
    height: 0;
    width: 100%;
    margin: 24px 0;
    clear: both;
  }

  &__tags {
    .el-tag {
      margin: 0 5px 5px 0;
    }
  }
}
</style>
